import { TabBar } from 'antd-mobile';
import Main from '../home/home';
import MyMenu from '../user/main/myMenu';
import Mall from '../mall/mall';
import constants from '../../../common/constants';
import  Cart from '../car/goods';

import OrderFills from '../car/orderFills';

const mainIconG = constants.mainIconG;
const mainIconB = constants.mainIconB;
const sortIconG = constants.sortIconG;
const sortIconB = constants.sortIconB;
const mallIconG = constants.mallIconG;
const mallIconB = constants.mallIconB;
const shoppingCartIconG = constants.shoppingCartIconG;
const shoppingCartIconB = constants.shoppingCartIconB;
const myIconG = constants.myIconG;
const myIconB = constants.myIconB;

class TabBarExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: sessionStorage.getItem("selectTab"),
            hidden: false,
            fullScreen: false,
        };
    }

    componentDidMount() {
        if (this.state.selectedTab === 'mainTab'){
            this.props.changeTitle("首页");
        }else if (this.state.selectedTab === 'sortTab'){
            this.props.changeTitle("分类");
        }else if (this.state.selectedTab === 'mallTab'){
            this.props.changeTitle("商城");
        }else if (this.state.selectedTab === 'carTab'){
            this.props.changeTitle("购物车");
        }else if (this.state.selectedTab === 'myTab'){
            this.props.changeTitle("我的");
        }
    }

    renderContent(pageText) {

        if(pageText === 'main'){
            return (
                <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
                    <div style={{marginBottom:120}}><Main/></div>
                </div>
            )
        }else if (pageText === 'my'){
            return (
                <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
                    <MyMenu/>
                </div>
            )
        }else if (pageText === 'mallTab'){
            return (
                <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
                   <Mall/>
                    {/*<MyMenu/>*/}
                </div>
            )
        }else if (pageText === 'shoppingCart'){
            return (
                <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
                    <Cart/>
                    {/*<MyCar/>*/}
                </div>
            )
        }
        // else if (pageText === 'shoppingCart'){
        //     return (
        //         <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
        //             <Cart/>
        //             {/*<MyMenu/>*/}
        //         </div>
        //     )
        // }
    }

    handleChange(selectTab){
        if (selectTab === 'mainTab'){
            this.props.changeTitle("首页");
        }else if (selectTab === 'sortTab'){
            this.props.changeTitle("分类");
        }else if (selectTab === 'mallTab'){
            this.props.changeTitle("商城");
        }else if (selectTab === 'carTab'){
            this.props.changeTitle("购物车");
        }else if (selectTab === 'myTab'){
            this.props.changeTitle("我的");
        }
    }

    render() {

        return (
            <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="main"
                        icon={<div style={{
                            width: '46px',
                            height: '46px',
                            background: `url(${mainIconG})` }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '46px',
                            height: '46px',
                            background: `url(${mainIconB})` }}
                        />
                        }
                        selected={this.state.selectedTab === 'mainTab'}
                        // badge={1}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'mainTab',
                            });
                            this.handleChange("mainTab");
                        }}
                        data-seed="logId"
                    >
                        {this.renderContent('main')}
                    </TabBar.Item>
                    <TabBar.Item
                        title="分类"
                        key="sort"
                        icon={<div style={{
                            width: '46px',
                            height: '46px',
                            background: `url(${sortIconG})` }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '46px',
                            height: '46px',
                            background: `url(${sortIconB})` }}
                        />
                        }
                        selected={this.state.selectedTab === 'sortTab'}
                        // badge={1}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'sortTab',
                            });
                            this.handleChange("sortTab");
                        }}
                        data-seed="logId"
                    >
                        {this.renderContent('sort')}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '46px',
                                height: '46px',
                                background: `url(${mallIconG})` }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '46px',
                                height: '46px',
                                background: `url(${mallIconB})` }}
                            />
                        }
                        title="商城"
                        key="mall"
                        badge={'new'}
                        selected={this.state.selectedTab === 'mallTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'mallTab',
                            });
                            this.handleChange("mallTab");
                        }}
                        data-seed="logId1"
                    >
                        {this.renderContent('mallTab')}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '46px',
                                height: '46px',
                                background: `url(${shoppingCartIconG})` }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '46px',
                                height: '46px',
                                background: `url(${shoppingCartIconB})` }}
                            />
                        }
                        title="购物车"
                        key="shoppingCart"
                        dot
                        selected={this.state.selectedTab === 'carTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'carTab',
                            });
                            this.handleChange("carTab");
                        }}
                    >
                        {this.renderContent('shoppingCart')}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '46px',
                                height: '46px',
                                background: `url(${myIconG})` }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '46px',
                                height: '46px',
                                background: `url(${myIconB})` }}
                            />
                        }
                        title="我的"
                        key="my"
                        selected={this.state.selectedTab === 'myTab'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'myTab',
                            });
                            this.handleChange("myTab");
                        }}
                    >
                        {this.renderContent('my')}
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default TabBarExample;
